<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table class="data-table">
			<tr class="alt">
				<td width="40%">排列方位</td>
				<td colspan="3">
					<select id="legend-orient-select" class="border-select hover-cursor edit-hover" style="width: 110px;">
						<option value="horizontal">水平</option>
						<option value="vertical">垂直</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>位置</td>
				<td colspan="3">
					<select id="legend-position-x-select" class="border-select hover-cursor edit-hover" style="width: 110px;">
						<option value="left">left</option>
						<option value="center">center</option>
						<option value="right">right</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>是否显示</td>
				<td colspan="3">
					<input class="tgl tgl-light" id="legend-show" type="checkbox" />
					<label class="tgl-btn" id="legend-show-radio" for="legend-show"></label>
				</td>
			</tr>
			<!-- <tr>
															<td>padding</td>
															<td colspan="3">
															    <input style="width: 40px;" type="number" value="0" step="1"/>
															    <input style="width: 40px;" type="number" value="0" step="1"/>
															    <input style="width: 40px;" type="number" value="0" step="1"/>
															    <input style="width: 40px;" type="number" value="0" step="1"/>
															</td>															
														</tr> -->
			<tr>
				<td>字体大小</td>
				<td colspan="3">
					<input id="legend-font-size-input" type="number" value="12" step="1" min="1" max="50" />
				</td>
			</tr>
			<tr>
				<td>字体颜色</td>
				<td colspan="3">
					<div class="table-font-color-box">
						<img id="legend-font-color-img" src="/img/backcolor-logo.png" width="25px" height="25px" />
						<input id="legend-font-color-input" class="table-font-color-box-input" type="text" width="50px;" />
						<span id="legend-font-color-box-show" class="table-font-color-box-show"></span>
					</div>
				</td>
			</tr>
			<tr>
				<td>字体粗细</td>
				<td colspan="3">
					<select id="legend-font-weight-select" class="border-select hover-cursor edit-hover" style="width: 110px;">
						<option value="normal">normal</option>
						<option value="bold">bold</option>
						<option value="bolder">bolder</option>
						<option value="lighter">lighter</option>
						<option value="100">100</option>
						<option value="200">200</option>
						<option value="200">300</option>
						<option value="200">400</option>
						<option value="200">500</option>
						<option value="200">600</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>边框宽度</td>
				<td colspan="3">
					<input id="legend-border-width-input" type="number" value="0" step="1" min="0" max="50" />
				</td>
			</tr>
			<tr>
				<td>边框颜色</td>
				<td colspan="3">
					<div class="table-font-color-box">
						<img id="legend-border-color-img" src="/img/backcolor-logo.png" width="25px" height="25px" />
						<input id="legend-border-color-input" class="table-font-color-box-input" type="text" width="50px;" />
						<span id="legend-border-color-box-show" class="table-font-color-box-show"></span>
					</div>
				</td>
			</tr>
			<tr>
				<td>边框圆角</td>
				<td colspan="3">
					<input id="legend-border-radius-input" type="number" value="0" step="1" min="0" max="50" />
				</td>
			</tr>
		</table>
	</body>
</html>
